<template>
  <div id="Ticket">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="券"
      >
      </el-table-column>
      <el-table-column
        label="类型"
      >
        <template slot-scope="scope">
          {{scope.row.type | handleTypeENum}}
        </template>
      </el-table-column>
      <el-table-column
        label="有效时间"
      >
        <template slot-scope="scope">
          {{`${scope.row.begintime} - ${scope.row.endtime}`}}
        </template>
      </el-table-column>
      <!--<el-table-column-->
        <!--label="领取时间"-->
      <!--&gt;-->
      <!--</el-table-column>-->
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :page-count="pageInfo.pageCount"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.currentPage"
      @current-change="loadTableData($event)"
    >
    </el-pagination>
  </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
export default {
  name: 'Ticket',
  props: ['tabConfig'],
  mounted () {
    this.$nextTick(() => {
      this.initPage()
    })
  },
  data () {
    return {
      tableData: null,
      pageInfo: {
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      }
    }
  },
  beforeRouteEnter (to, from, next) {},
  watch: {},
  filters: {
    handleTypeENum: value => {
      switch (value) {
        case 1:
          return '代金券/折扣券'
        case 2:
          return '活动券'
        default:
          return ''
      }
    }
  },
  methods: {
    initPage () { // 初始化
      this.loadTableData()
    },
    async loadTableData (page = 1) { // 加载数据
      this.tabConfig.loading = true
      const { id } = this.$route.params
      const response = await API.queryTicket({ accountId: id, page })
      this.tabConfig.loading = false
      const { code, data } = response
      if (code === 1) {
        const { pageCount, pageIndex, pageSize, rows } = data
        this.tableData = rows
        this.pageInfo.pageCount = pageCount || 1
        this.pageInfo.pageSize = pageSize
        this.pageInfo.currentPage = pageIndex
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
</style>
